import React from 'react';
import { Table, Pagination } from '@casstime/bricks';
import { observer } from 'mobx-react';
import ExamplePageStore from '../stores/ExamplePageStore';
// import NewState from '../stores/Test';
import { RouteConfigComponentProps } from 'react-router-config';
import SearchPanel from './SearchPanel';
import { Link } from 'react-router-dom';
import { ICostBillClassifyDTOList } from '../interface/ICheckList';
import { toJS } from 'mobx';

interface IExamplePageProps extends RouteConfigComponentProps<void> {
  examplePageStore: ExamplePageStore;
  // newState: NewState;
}
@observer
export default class Main extends React.Component<IExamplePageProps, {}> {
  componentDidMount() {
    this.props.examplePageStore.fetchCheckList();
  }

  toPage(current: number, size: number) {
    // console.log('current', current, 'size', size);
    this.props.examplePageStore.updatePageOptions({ current, size });
    this.props.examplePageStore.fetchCheckList();
  }
  render() {
    const { examplePageStore } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        render: (
          text: string,
          row: ICostBillClassifyDTOList,
          index: number
        ) => {
          return index + 1;
        }
      },
      {
        title: '账单编号',
        dataIndex: 'costBillId',
        key: 'costBillId',
        align: 'center'
      },
      {
        title: '公司名称',
        dataIndex: 'companyName',
        key: 'companyName',
        align: 'center'
      },
      {
        title: '账单类型',
        dataIndex: 'billTypeName',
        key: 'billTypeName',
        align: 'center'
      },
      {
        title: '制单时间',
        dataIndex: 'billCycleStart',
        key: 'billCycleStart',
        align: 'center'
      },
      {
        title: '最迟还款日',
        dataIndex: 'billCycleEnd',
        key: 'billCycleEnd',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: '',
        key: 'operations',
        align: 'center',
        render: (
          text: string,
          row: ICostBillClassifyDTOList,
          index: number
        ) => {
          return (
            <div>
              <Link to="/product-update">查看</Link>
            </div>
          );
        }
      }
    ];

    const data = toJS(examplePageStore.checkList);

    return (
      <div className="From-Example">
        <SearchPanel store={examplePageStore} />
        <Table columns={columns} data={data} rowKey={row => row.costBillId} />
        <Pagination
          showQuickJumper
          pageSize={examplePageStore.pageOptions.size}
          defaultCurrent={1}
          total={examplePageStore.totalNumber}
          onChange={this.toPage.bind(this)}
        />
      </div>
    );
  }
}
